<template>
  <div class="demo-container">
    <h1>返回顶部组件演示,数字用于滚动测试</h1>
    <div class="scroll-content">
      <!-- 长内容用于滚动测试 -->
      <div v-for="n in 100" :key="n">{{ n }}</div>
    </div>

    <!-- 默认样式 -->
    <BackToTop bottom="260px"/>

    <!-- 小尺寸 -->
    <BackToTop size="small" bottom="200px" />

    <!-- 自定义位置和内容 -->
    <BackToTop
        size="big"
        right="160px"
        bottom="220px"
    >
      <div class="custom-content">
        📘
      </div>
    </BackToTop>
  </div>

</template>

<script setup>
import BackToTop from '../components/BackToTop/BackToTop.vue';
</script>

<style scoped>
.scroll-content {
  height: 200vh;
  padding: 20px;
  background: linear-gradient(to bottom, #ffffff, #f0f0f0);
}

.custom-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #2196f3;
  font-size: 24px;
}
</style>